<template>
    <div>

        <!-- ref与复杂数据类型的关系 -->
        <span>{{ refObj }}</span>

        <p>
            {{ refObj.age }}
        </p>

        <p>
            {{ refObj.name }}
        </p>
        <button @click="refObj.age++">  年龄++</button>
        <button @click="handleCK"> 输出refObj</button>
    </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"

let obj = {
    name:'qiu',
    age:18
}

let refObj = ref(obj)

console.log(refObj);
 
const handleCK = ()=>{
    console.log(refObj); 
    refObj.value.age++;
    console.log(refObj.value.age);
    
}

</script>
 
<style lang = "less" scoped>
    
</style>